<template>
    <div id="my">
        <header>
            <img src="src/assets/img/my/default.png" alt="">
            <span>天天喝奶茶</span>
        </header>
        <div class="myform">
            <p>我的订单<span>全部订单></span></p>
        </div>
        <div class="status">
            <div class="block">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-daifukuan1"></use>
                </svg>
                <p>待付款</p>
            </div>
            <div class="block">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-daishouhuo"></use>
                </svg>
                <p>待收货</p>
            </div>
            <div class="block">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-xiugai"></use>
                </svg>
                <p>退换修</p>
            </div>
        </div>
        <div class="con">
            <ul>
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-huiyuan2"></use>
                    </svg>
                    会员中心
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shangchuanicon-fuben"></use>
                    </svg>
                </li>
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-youhuiquan1"></use>
                    </svg>
                    我的优惠
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shangchuanicon-fuben"></use>
                    </svg>
                </li>
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fuwu"></use>
                    </svg>
                    服务中心
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shangchuanicon-fuben"></use>
                    </svg>
                </li>
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jiatingfang"></use>
                    </svg>
                    小米之家
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shangchuanicon-fuben"></use>
                    </svg>
                </li>
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-liwu1"></use>
                    </svg>
                    礼物码兑换
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shangchuanicon-fuben"></use>
                    </svg>
                </li>
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shezhi"></use>
                    </svg>
                    设置
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shangchuanicon-fuben"></use>
                    </svg>
                </li>
            </ul>
        </div>
    </div>
</template>
<style lang="less" scoped>
    .icon {
        width: 1em;
        height: 1em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
        font-size: 29px;
        margin: 0 5px;
    }
    header{
        width: 100%;
        background-color:#f37D0F;
        padding: 16px 16px;
        display: flex;
        flex-wrap: wrap;
        box-sizing: border-box;
    }
    header img{
        width: 45px;
        height: 45px;
        border-radius: 50%;
        overflow: hidden;
        margin: 0 10px;
    }
    header span{
        color: white;
        margin: auto 0px;
    }
    .myform{
            width: 100%;
            line-height: 40px;
            font-size: 17px;
            text-align: left;
            padding: 0 10px;
            box-sizing: border-box;
        }
    .myform span{
        float: right;
        font-size: 15px;
        color: gray;
    }
    .status{
        display: flex;
        flex-wrap: wrap;
        padding: 20px 0;
        border-top: 1px solid grey;
    }
    .status .block{
        width: 33.33333336%;
        color: rgba(0,0,0,0.87);
    }
     .status .block .icon{
         color: gray;
     }
     .con{
         padding: 0 20px;
     }
     .con li{
         padding: 15px 0;
         text-align: left;
         font-size: 17px;
         margin: 10px 0;
     }
     .con li svg:nth-of-type(2){
         float: right;
         font-size: 17px;
         transform: rotate(180deg);
         margin: 5px;
     }
</style>